<template>
  <view>
    <u-navbar title="我的银行卡" title-size="36"></u-navbar>
    <view class="container">
      <view
        v-if="item.src"
        class="bank-card"
        :style="'background-image:url(' + `${getImageUrl(item.src)}` + ')'"
        v-for="(item, index) in cardList"
        :key="index"
        @click="toRemove(item)"
      >
        <u-icon class="logo" :name="`${getImageUrl(item.logo)}`" mode="" size="80"></u-icon>
        <view class="card-info">
          <view class="" style="font-size: 32rpx">
            {{ item.cardName }}
          </view>
          <view class="">
            {{ item.realName }}
          </view>
          <p style="font-size: 36rpx">{{ item.cardNo }}</p>
        </view>
      </view>
      <view
        v-else
        class=""
        @click="toRemove(item)"
        style="background-color: #909399; border-radius: 20rpx"
      >
        <!-- 其它银行卡 -->
        <view class="card-info">
          <view class="" style="font-size: 32rpx">
            {{ item.cardName }}
          </view>
          <view class="">
            {{ item.realName }}
          </view>
          <p style="font-size: 36rpx">{{ item.cardNo }}</p>
        </view>
      </view>
    </view>
    <view class="footer-box">
      <view class="add-card" @click="routeTo"> +添加银行卡 </view>
    </view>
  </view>
</template>

<script>
const hasCode = ['CCB', 'ABC', 'BOC', 'ICBC', 'COMM', 'PSBC']
export default {
  data() {
    return {
      hasCode,
      cardList: [],
      bankList: [],
      t: {
        id: 4624,
        userId: 28644,
        realName: '李玉江',
        cardType: 'DC',
        cardNo: '6222807102671159575',
        cardCode: 'CCB',
        cardName: '中国建设银行',
        cardAddress: '中国建设银行股份有限公司贵州大学支行',
        status: 0,
        isDefault: false,
        remark: '你说的对',
        createTime: '2019-08-24T14:15:22Z'
      }
    }
  },
  onShow() {
    this.getBankCard()
  },

  methods: {
    inArray(search, array) {
      for (var i in array) {
        if (array[i] == search) return true
      }
      return false
    },
    getBankCard() {
      this.$u.api.getBankList().then((res) => {
        res.data.forEach((item) => {
          if (this.inArray(item.cardCode, hasCode)) {
            item.logo = 'bank/' + item.cardCode + '.png'
            item.src = 'bank/' + item.cardCode + '_bg.png'
          }
        })
        this.cardList = res.data
      })
    },
    routeTo() {
      uni.navigateTo({
        url: '/other/bank-card/bank-card'
      })
    },

    toRemove(item) {
      uni.$emit('list', item)
      uni.navigateBack({
        delta: 1
      })
      // uni.navigateTo({
      // 	url: "/other/bank-card-remove/bank-card-remove?card=" + JSON.stringify(item)
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
}

.bank-card {
  position: relative;
  background-size: 690rpx 240rpx;
  width: 690rpx;
  height: 240rpx;
  margin-bottom: 20rpx;
}

.logo {
  position: absolute;
  top: 60rpx;
  left: 30rpx;
}

.card-info {
  margin: 60rpx 139rpx;
  color: #fff;
  line-height: 55rpx;
}

.add-card {
  position: fixed;
  bottom: 0;
  padding: 40rpx 20rpx;
  background-color: #fff;
  width: 100%;
  font-size: 30rpx;
  color: #f54831;
}

.footer-box {
  padding-bottom: constant(safe-area-inset-bottom) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}
</style>
